<template>
  <!--fixStyle  此div用于解决views.vue中出现多余黑屏的问题-->
  <div :style="fixStyle">
    <div class="container" :style="styleName" id="container" ref="container">
      <!--拖拽组件时出现的网状线-->
      <div class="grade" v-if="gradeFlag" :style="gradeLenStyle"></div>
      <subgroup ref="subgroup" :nav="contain.list"/>
    </div>
  </div>
</template>

<script>
import subgroup from './subgroup'
import { getObj } from '@/api/visual'
import Vue from 'vue'
Vue.prototype.$website = window.$website;
export default {
  name: 'contents',
  inject: ["contain"],
  props: {
    option: Object,
    props: {
      type: Object,
      default: () => {
        return {}
      }
    },
    scale: Number
  },
  provide () {
    return {
      contain: this.contain,
      container: this
    };
  },
  components: {
    subgroup
  },
  data () {
    return {
      selectCount: {
        x1: null,
        x2: null,
        y1: null,
        y2: null
      },
      gradeFlag: false
    }
  },
  computed: {
    //有背景图时使用背景图，无背景图时使用背景颜色
    styleName () {
      return Object.assign({
        width: this.setPx(this.contain.config.width),
        height: this.setPx(this.contain.config.height),
        backgroundColor: this.contain.config.backgroundColor
      }, (() => {
        const c_style = {}
        if (!(this.contain.config.backgroundColor && this.contain.config.backgroundImage==='/img/bg/bg.png')) {
          c_style['background-image'] = `url(${this.contain.config.backgroundImage})`
        }
        // 在项目管理中进行预览时因为没有父级build.vue，所以需要计算
        if (!this.scale) {
          c_style['transform'] = `scale(${screen.width / this.contain.config.width})`
        }
        return c_style
      })())
    },
    fixStyle() {
      const f_style = {}
      if (!this.scale) {
        const scale = screen.width / this.contain.config.width
        f_style['width'] = `${scale * this.contain.config.width}px`
        f_style['height'] = `${scale * this.contain.config.height}px`
      }
      return f_style
    },
    gradeLenStyle () {
      return {
        backgroundSize: `${this.setPx(this.contain.config.gradeLen)} ${this.setPx(this.contain.config.gradeLen)},${this.setPx(this.contain.config.gradeLen)} ${this.setPx(this.contain.config.gradeLen)}`
      }
    },
    isBuild () {
      return this.$route ? this.$route.name === 'build' : false;
    }
  },
  mounted () {
    this.initData();
    this.initFun();
  },
  methods: {
    initFun () {
      ['handleRefresh', 'getDragObj'].forEach(ele => {
        this[ele] = this.$refs.subgroup[ele]
      });
    },
    //初始化数据
    initData () {
      const id = this.$route ? this.$route.params.id : this.props.id
      this.contain.id = id;
      this.contain.contentWidth = this.$refs.container.offsetWidth;
      let config;
      const callback = () => {
        //赋值属性
        if (this.contain.config.mark.show && !this.isBuild) {
          let fontSize =this.contain.config.mark.fontSize
          if(fontSize){
            fontSize = fontSize +"px"
            const newConfig = {
              fontSize: fontSize
            }
            this.watermark({...this.contain.config.mark,...newConfig});
          }else {
            this.watermark(this.contain.config.mark);
          }

        }
        this.calcData();
      }
      if (id) {
        const loading = this.$loading({
          lock: true,
          text: '正在加载中，请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getObj(id).then(res => {
          const data = res.data.data;
          this.contain.obj = data;
          config = data.config;
          const contain = {
            config: JSON.parse(config.detail) || {},
            component: JSON.parse(config.component) || []
          }
          this.contain.json = contain
          this.contain.config = contain.config;
          this.contain.nav = contain.component
          this.contain.visual = data.visual;
          //添加水印。只有查看页面生效
          if (!this.isBuild) {
            const password = this.contain.visual.password
            if (!this.validatenull(password)) {
              this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                showCancelButton: false,
                showClose: false,
                closeOnClickModal: false,
                inputPattern: new RegExp(password),
                inputErrorMessage: '密码不正确，请重新输入'
              }).then(() => {
                callback();
              })
            } else {
              callback();
            }

          } else {
            callback();
          }
          loading.close();
        }).catch((err) => {
          console.log(err)
          loading.close();
        })
      } else if (this.option) {
        config = this.option;
        this.contain.config = config.detail || {};
        this.contain.nav = config.component || [];
        callback();
      }
    },
    calcData () {
      if (!this.contain.config.mark) this.contain.config.mark = {}
      if (!this.contain.config.query) this.contain.config.query = {}
    },
    handlePostionSelect (postion) {
      this.handleCalcPostionSelect();
      const x1 = this.selectCount.x1;
      const x2 = this.selectCount.x2;
      const y1 = this.selectCount.y1;
      const y2 = this.selectCount.y2;
      if (postion === 'left') {
        this.handleMoveSelectList(x1, undefined, true, postion);
      } else if (postion === 'center') {
        this.handleMoveSelectList(x1 + (x2 - x1) / 2, undefined, true, postion);
      } else if (postion === 'right') {
        this.handleMoveSelectList(x2, undefined, true, postion);
      } else if (postion === 'top') {
        this.handleMoveSelectList(undefined, y1, true, postion);
      } else if (postion === 'middle') {
        this.handleMoveSelectList(undefined, y1 + (y2 - y1) / 2, true, postion);
      } else if (postion === 'bottom') {
        this.handleMoveSelectList(undefined, y2, true, postion);
      }
    },
    handleMoveSelectList (left, top, type, postion) {
      this.contain.active.forEach(ele => {
        ele = this.contain.findlist(ele)
        const ele_component = ele.component;
        //水平情况
        if (left) {
          let baseLeft = Number(type ? left : (ele.left + left).toFixed(2));
          if (postion === 'right') {
            baseLeft = baseLeft - ele_component.width
          }
          else if (postion === 'center') {
            const obj_center = ele.left + ele_component.width / 2;
            baseLeft = ele.left + (left - obj_center)
          }
          this.$set(ele, 'left', baseLeft);
        }
        //垂直情况
        if (top) {
          let baseTop = Number(type ? top : (ele.top + top).toFixed(2));
          if (postion === 'bottom') {
            baseTop = baseTop - ele_component.height
          }
          else if (postion === 'middle') {
            const obj_middle = ele.top + ele_component.height / 2;
            baseTop = ele.top + (top - obj_middle)
          }
          this.$set(ele, 'top', baseTop)
        }
      })
    },
    //计算多选状态下的最大边界值
    handleCalcPostionSelect () {
      this.selectCount = {
        x1: null,
        x2: null,
        y1: null,
        y2: null
      }
      this.contain.active.forEach(ele => {
        ele = this.contain.findlist(ele)
        const left = ele.left;
        const top = ele.top;
        const width = ele.component.width;
        const height = ele.component.height;
        if (!this.selectCount.x1) {
          this.selectCount = {
            x1: left,
            x2: left + width,
            y1: top,
            y2: top + height
          }
        }
        if (this.selectCount.x1 > left) this.selectCount.x1 = left;
        if (this.selectCount.x2 < left + width) this.selectCount.x2 = left + width;
        if (this.selectCount.y1 > top) this.selectCount.y1 = top;
        if (this.selectCount.y2 < top + height) this.selectCount.y2 = top + height;
      })
    },
  }
}
</script>
